<template>
  <div class="login-page">
    <div class="login-body">
      <div class="login-logo" />
      <div class="login-box">
        <div class="login-title">Welcome to Login</div>
        <div class="login-subtitle">输入您的凭证以访问您的账户</div>
        <div class="login-input">
          <div class="input-wrapper">
            <el-input
              v-model="loginForm.username"
              class="ivu-input"
              placeholder="请输入账号"
              clearable
              :prefix-icon="User"
            />
          </div>
          <div class="input-wrapper">
            <el-input
              v-model="loginForm.password"
              clearable
              show-password
              class="ivu-input"
              placeholder="请输入密码"
              :prefix-icon="Lock"
            />
          </div>
          <el-button class="btn" type="success" @click="gotoHome">登录</el-button>
          <!-- <div class="login-switch">
            "还没有账号？"
            <span class="to-register" @click="gotoRegister">向管理员申请</span>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
import {User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import {encryptDes,RSAencrypt} from '../utils/des.js'
import {setCookies, getCookies} from '../utils/auth.js'
import {userController} from '@/api'
import {fileStore} from '../store'
import {sendWSPush,createSocket} from '@/utils/websocket.js'


// 获取pinia中的实例
const fileMainStore = fileStore()

  const loginForm = reactive({
    username: '',
    password: '',
    des_kv: undefined,
    rsa_kv:undefined
  })

  const router = useRouter()
  function gotoRegister() {
    router.push({ name: 'register' })
  }

  async function gotoHome() {
    loginForm.password = encryptDes(loginForm.password,"QU*%123+CHEN+qwer123+456+&*+"+loginForm.username);

    loginForm.des_kv =RSAencrypt("QU*%123+CHEN+qwer123+456+&*+"+loginForm.username,loginForm.rsa_kv);
    
     //登陆     
    const res= await userController.login({username:loginForm.username,password:loginForm.password,des_kv:loginForm.des_kv,rsa_kv:loginForm.rsa_kv})
     
    if(res.data.code === 200) {
      let data = res.data.data;
    //   let sendData = {
    //     type: 7,
    //     params: {
    //       user_id: data.user_id
    //     }
    //   }
    //  createSocket()
    //   sendWSPush(sendData)
      
      //存储用户信息
      setCookies('token', data.token);
      const res2 = await userController.getUserDetail({user_id: data.suer_id, user_name: data.username})
      if(res2.data.code === 200) {
        fileMainStore.save_Url(res2.data.data.avatar)
        setCookies('user', JSON.stringify(res2.data.data))
      }
      setCookies('user_id',data.user_id)
      setCookies('username',data.username)
      ElMessage({message: '登陆成功', type: 'success'})
      router.push({ name: 'home' })
    } else {
      ElMessage({message: '登陆失败', type: 'danger'})
    }
  }

  //获取密钥
  async function getRSAKey() {
    const res = await userController.getRSAKey()
    if(res.data.code === 200) {
      console.log(res);
      loginForm.rsa_kv = res.data.data.publicKey
    }
  }

onMounted(() => {
  getRSAKey()
})




</script>

<style scoped lang="scss">
.login-page {
  width: 100%;
  height: 100%;
  align-items: center;
  background-color: #f8f8f8;
  display: flex;
  justify-content: center;
  .login-body {
    align-items: center;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: auto;
    padding: 32px 0;
    width: 100%;
    .login-logo {
      cursor: pointer;
      background: url('../assets/logo.png') no-repeat 50%;
      background-size: contain;
      flex-shrink: 0;
      height: 84px;
      width: 84px;
    }
    .login-box {
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 0 10px #e6ecfa;
      margin-top: 36px;
      max-width: 90%;
      width: 400px;
      .login-title {
        font-size: 24px;
        font-weight: 600;
        margin-top: 36px;
        text-align: center;
      }
      .login-subtitle {
        color: #aaa;
        font-size: 14px;
        margin-top: 12px;
        padding: 0 12px;
        text-align: center;
      }
      .login-input {
        margin: 32px 40px;
        .input-wrapper {
          display: inline-block;
          width: 100%;
          position: relative;
          vertical-align: middle;
          line-height: normal;
          .ivu-input {
            height: 40px;
            font-size: 15px;
            color: #606266;
          }
        }
        .btn {
          width: 100%;
          height: 40px;
          font-size: 16px;
          margin-top: 40px;
        }
        .login-switch {
          color: #aaa;
          opacity: .7;
          .to-register {
            color: #67C23A;
            cursor:pointer;
          }
        }
      }
      .login-input>* {
        margin-top: 26px;
      }
    }
  }
}
</style>
